<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>五金商城</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/common.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/index.css" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/bootstrap3/css/bootstrap-theme.min.css">
<script src="<%=request.getContextPath() %>/js/jquery-1.11.2.min.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap.min.js"></script>
<script type="text/javascript">

 



</script>

</head>
<body>
<%@include file="menu.jsp" %>
<div class="w_980 m">
<div class="w_980 fl_l">
  
  <!-- 天假轮播图------------------- -->
  <center>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 980px">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item next left">
          <img data-src="holder.js/1200x500/auto/#777:#555/text:First slide" alt="First slide [1200x500]" src="<%=request.getContextPath() %>/products/1/cs100011.jpg" data-holder-rendered="true">
        </div>
        <div class="item">
          <img data-src="holder.js/1200x500/auto/#666:#444/text:Second slide" alt="Second slide [1200x500]" src="<%=request.getContextPath() %>/products/1/cs100022.jpg" data-holder-rendered="true">
        </div>
        <div class="item active left">
          <img data-src="holder.js/1200x500/auto/#555:#333/text:Third slide" alt="Third slide [1200x500]" src="<%=request.getContextPath() %>/products/1/cs100033.jpg" data-holder-rendered="true">
        </div>
      </div>
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    </center>
  <!-- ================ -->
</div>

<%-- <div class="w_980 fl_l ma_t10"><img src="<%=request.getContextPath() %>/images/ad8.jpg" width="980" height="60" /></div> --%>

<%-- <c:forEach items="${categoryList}" var="jk" begin="0" end="3"> --%>
<%-- 			<div class="w_978 fl_l ma_t10 bor">
		  <div class="tl_bg">
		
		    	<div class="tl_title fl_l">${jk.cname}<input type="hidden" name="cid" value="${jk.cid}"/></div>
		    	<div class="tl_more fl_r">
			    	<c:forEach var="h" items="${categorysecondList}">
			    		<c:if test="${h.cname==jk.cname}">
				    			<c:forEach items="${h.csname}" var="d">
				    				<a href="">${d}</a> |
				    			</c:forEach>
			    		</c:if>
			    	</c:forEach>
			    	<a href="" class="redfont">查看全部</a>
				</div>
		
		    </div>
		</div> --%>
		

<div class="w_980 fl_l">
	<!-- 第一行展示的图片自行设置 -->
	<div class="row">
    <!-- 如何展示每行图片，ajax的话，去根据一级分类的id的查询 -->
    	
	    	<c:forEach items="${productList}" var="s" varStatus="sd">
	    		<div class="col-sm-6 col-md-3" style="width: 252px;height: 320px">
			        <a href="<%=request.getContextPath() %>/product/goods?pid=${s.id}" class="thumbnail">
			            <img style="width: 240px;height: 220px" src="<%=request.getContextPath() %>/${s.image}"
			                 alt="通用的占位符缩略图">
			        </a>
			        <span style="color: green"> ${s.pname}</span><br/><span style="color: red"></>商城价格：${s.shopPrice}</span>
	   		 	</div>
	    	</c:forEach>
	    
	    	
</div>
</div>
<%-- </c:forEach> --%>
<div class="bottom fl_l ma_t10">
	<div class="footlink">
    	<div class="footlinkt">配送范围</div>
        <ul>
        	<li><a href="">上海 |  北京 |  其他地区</a></li>
        	<li><a href="">配送费收取标准</a></li>            
        </ul>
    </div>
    <div class="footlink">
    	<div class="footlinkt">服务说明</div>
        <ul>
        	<li><a href="">付款方式</a></li>
        	<li><a href="">服务协议 </a></li>            
        </ul>
    </div>
    <div class="footlink">
    	<div class="footlinkt">我的订单</div>
        <ul>
        	<li><a href="">查询订单</a></li>
        	<li><a href="">如何下订单</a></li>            
        </ul>
    </div>
    <div class="footlink">
    	<div class="footlinkt">售后服务</div>
        <ul>
        	<li><a href="">退换货原则</a></li>
        	<li><a href="">在线客服区</a></li>
        	<li><a href="">在线客服区</a></li>                         
        </ul>
    </div>
    <div class="footlink">
    	<div class="footlinkt">需要帮助</div>
        <ul>
        	<li><a href="">忘记密码</a></li>
        	<li><a href="">常见问题</a></li> 
        	<li><a href="">联系客服人员</a></li>
        	<li><a href="">抵用券使用说明</a></li>                         
        </ul>
    </div>
</div>
<div class="w_980 fl_l ma_t10">
	<ul class="footerpic1">
    	<li><a href=" "><img src="<%=request.getContextPath() %>/images/wmjl.jpg" width="217" height="49" /></a></li>
    	<li><a href=" "><img src="<%=request.getContextPath() %>/images/mbby.jpg" width="217" height="49" /></a></li>
    	<li><a href=" "><img src="<%=request.getContextPath() %>/images/gkzs.jpg" width="217" height="49" /></a></li>
    </ul>
</div>
<div class="w_980 fl_l ma_t10 te_m">关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 移动终端 | 友情链接 | 销售联盟
<br />北京市公安局海淀分局备案编号：11010233381  京ICP证070的4523号  
<br />Copyright2004-2011  五金商城 版权所有</div>
<div class="w_980 fl_l ma_t10">
	<ul class="footerpic">
    	<li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_pic_04.gif" width="91" height="31" /></a></li>
    	<li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_pic_05.gif" width="91" height="31" /></a></li>
    	<li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_pic_06.gif" width="91" height="31" /></a></li>
    	<li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_pic_07.gif" width="91" height="31" /></a></li>
    	<li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_pic_09.gif" width="91" height="31" /></a></li> 
    	<li><a href=" "><img src="<%=request.getContextPath() %>/images/footer_cnnic.jpg" width="91" height="31" /></a></li>                                         
    </ul>
</div>
</div>
</body>
</html>
